<template>
  <van-nav-bar
    title="商品详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  >
    <template #right>
      <van-icon name="cart" size="20" @click="onCart" />
    </template>
  </van-nav-bar>
  <div>
    <img
      :src="product.picture"
      alt="picture"
      style="width: 100%; height: 35vh"
    />
    <p>{{ product.shop }}</p>
    <p><span>商品价格: </span>￥{{ product.price }}</p>
    <van-button type="primary">加入购物车</van-button>
    <img
      :src="item"
      alt="picture"
      style="width: 100%; height: 35vh"
      v-for="item in productList"
    />
  </div>
</template>

<script setup lang="ts">
import { useProduct } from "@/hook/detail";
const { onClickLeft, product, onCart, productList } = useProduct();
</script>

<style scoped lang="scss"></style>
